// 图表 1
import * as Chart from "echarts";

const SCEoption1 = {
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}月 : {c}"
    },
    legend: {
        data: [{
            name: '',
            icon: 'rect'
        }],
        top: 1,
        left: 1,
        itemGap: 10,
        itemWidth: 12,
        itemHeight: 12,
        textStyle: {
            fontSize: 12,
            color: "#323232"
        }
    },
    grid: {
        left: 50,
        right: 10,
        top: 30,
        bottom: 30,
        borderWidth: 1
    },
    xAxis: {
        type: 'category',
        data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
        axisLine: {
            lineStyle: {
                color: "#999999",
                width: 1
            }
        },
        axisLabel: {
            margin: 14,
            height: 70,
            interval: 0,
            textStyle: {
                fontSize: 10,
                color: "#999999"
            }
        }
    },
    yAxis: {
        type: 'value',
        axisLine: {
            lineStyle: {
                color: "#999999",
                width: 1
            }
        },
        axisLabel: {
            margin: 14,
            textStyle: {
                fontSize: 10,
                color: "#999999"
            }
        }
    },
    series: [{
        name: '',
        type: 'bar',
        barGap: 0,
        data: [50000, 70000, 80000, 40000, 50000, 30000, 40000, 60000, 50000, 40000, 60000, 40000],
        barWidth: 10,
        itemStyle: {
            normal: {
                color: new Chart.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        {offset: 0, color: '#83bff6'},
                        {offset: 0.5, color: '#188df0'},
                        {offset: 1, color: '#188df0'}
                    ]
                )
            },
            emphasis: {
                color: new Chart.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        {offset: 0, color: '#2378f7'},
                        {offset: 0.7, color: '#2378f7'},
                        {offset: 1, color: '#83bff6'}
                    ]
                )
            }
        }
    }]
}
// 图表 2
const SCEoption2 = {
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}月 : {c}"
    },
    legend: {
        data: [{
            name: '',
            icon: 'rect'
        }],
        top: 1,
        left: 1,
        itemGap: 10,
        itemWidth: 12,
        itemHeight: 12,
        textStyle: {
            fontSize: 12,
            color: "#323232"
        }
    },
    grid: {
        left: 50,
        right: 10,
        top: 30,
        bottom: 30,
        borderWidth: 1
    },
    xAxis: {
        type: 'category',
        data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
        axisLine: {
            lineStyle: {
                color: "#999999",
                width: 1
            }
        },
        axisLabel: {
            margin: 14,
            height: 70,
            interval: 0,
            textStyle: {
                fontSize: 10,
                color: "#999999"
            }
        }
    },
    yAxis: {
        type: 'value',
        axisLine: {
            lineStyle: {
                color: "#999999",
                width: 1
            }
        },
        axisLabel: {
            margin: 14,
            textStyle: {
                fontSize: 10,
                color: "#999999"
            }
        }
    },
    series: [{
        name: '',
        type: 'bar',
        barGap: 0,
        data: [50000, 70000, 80000, 40000, 50000, 30000, 40000, 60000, 50000, 40000, 60000, 40000],
        barWidth: 10,
        itemStyle: {
            normal: {
                color: new Chart.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        {offset: 0, color: '#83bff6'},
                        {offset: 0.5, color: '#188df0'},
                        {offset: 1, color: '#188df0'}
                    ]
                )
            },
            emphasis: {
                color: new Chart.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        {offset: 0, color: '#2378f7'},
                        {offset: 0.7, color: '#2378f7'},
                        {offset: 1, color: '#83bff6'}
                    ]
                )
            }
        }
    }]
}
// 图表 3
const SCEoption3 = {
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}月 : {c}"
    },
    legend: {
        data: [{
            name: '',
            icon: 'rect'
        }],
        top: 1,
        left: 1,
        itemGap: 10,
        itemWidth: 12,
        itemHeight: 12,
        textStyle: {
            fontSize: 12,
            color: "#323232"
        }
    },
    grid: {
        left: 50,
        right: 10,
        top: 30,
        bottom: 30,
        borderWidth: 1
    },
    xAxis: {
        type: 'category',
        data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
        axisLine: {
            lineStyle: {
                color: "#999999",
                width: 1
            }
        },
        axisLabel: {
            margin: 14,
            height: 70,
            interval: 0,
            textStyle: {
                fontSize: 10,
                color: "#999999"
            }
        }
    },
    yAxis: {
        type: 'value',
        axisLine: {
            lineStyle: {
                color: "#999999",
                width: 1
            }
        },
        axisLabel: {
            margin: 14,
            textStyle: {
                fontSize: 10,
                color: "#999999"
            }
        }
    },
    series: [{
        name: '',
        type: 'bar',
        barGap: 0,
        data: [50000, 70000, 80000, 40000, 50000, 30000, 40000, 60000, 50000, 40000, 60000, 40000],
        barWidth: 10,
        itemStyle: {
            normal: {
                color: new Chart.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        {offset: 0, color: '#83bff6'},
                        {offset: 0.5, color: '#188df0'},
                        {offset: 1, color: '#188df0'}
                    ]
                )
            },
            emphasis: {
                color: new Chart.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        {offset: 0, color: '#2378f7'},
                        {offset: 0.7, color: '#2378f7'},
                        {offset: 1, color: '#83bff6'}
                    ]
                )
            }
        }
    }]
}
// 图表 4
const SCEoption4 = {
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}月 : {c}"
    },
    legend: {
        data: [{
            name: '',
            icon: 'rect'
        }],
        top: 1,
        left: 1,
        itemGap: 10,
        itemWidth: 12,
        itemHeight: 12,
        textStyle: {
            fontSize: 12,
            color: "#323232"
        }
    },
    grid: {
        left: 50,
        right: 10,
        top: 30,
        bottom: 30,
        borderWidth: 1
    },
    xAxis: {
        type: 'category',
        data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
        axisLine: {
            lineStyle: {
                color: "#999999",
                width: 1
            }
        },
        axisLabel: {
            margin: 14,
            height: 70,
            interval: 0,
            textStyle: {
                fontSize: 10,
                color: "#999999"
            }
        }
    },
    yAxis: {
        type: 'value',
        axisLine: {
            lineStyle: {
                color: "#999999",
                width: 1
            }
        },
        axisLabel: {
            margin: 14,
            textStyle: {
                fontSize: 10,
                color: "#999999"
            }
        }
    },
    series: [{
        name: '',
        type: 'bar',
        barGap: 0,
        data: [50000, 70000, 80000, 40000, 50000, 30000, 40000, 60000, 50000, 40000, 60000, 40000],
        barWidth: 10,
        itemStyle: {
            normal: {
                color: new Chart.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        {offset: 0, color: '#83bff6'},
                        {offset: 0.5, color: '#188df0'},
                        {offset: 1, color: '#188df0'}
                    ]
                )
            },
            emphasis: {
                color: new Chart.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        {offset: 0, color: '#2378f7'},
                        {offset: 0.7, color: '#2378f7'},
                        {offset: 1, color: '#83bff6'}
                    ]
                )
            }
        }
    }]
}
// 图表 5
const SCEoption5 = {
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}月 : {c}"
    },
    legend: {
        data: [{
            name: '',
            icon: 'rect'
        }],
        top: 1,
        left: 1,
        itemGap: 10,
        itemWidth: 12,
        itemHeight: 12,
        textStyle: {
            fontSize: 12,
            color: "#323232"
        }
    },
    grid: {
        left: 50,
        right: 10,
        top: 30,
        bottom: 30,
        borderWidth: 1
    },
    xAxis: {
        type: 'category',
        data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
        axisLine: {
            lineStyle: {
                color: "#999999",
                width: 1
            }
        },
        axisLabel: {
            margin: 14,
            height: 70,
            interval: 0,
            textStyle: {
                fontSize: 10,
                color: "#999999"
            }
        }
    },
    yAxis: {
        type: 'value',
        axisLine: {
            lineStyle: {
                color: "#999999",
                width: 1
            }
        },
        axisLabel: {
            margin: 14,
            textStyle: {
                fontSize: 10,
                color: "#999999"
            }
        }
    },
    series: [{
        name: '',
        type: 'bar',
        barGap: 0,
        data: [50000, 70000, 80000, 40000, 50000, 30000, 40000, 60000, 50000, 40000, 60000, 40000],
        barWidth: 10,
        itemStyle: {
            normal: {
                color: new Chart.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        {offset: 0, color: '#83bff6'},
                        {offset: 0.5, color: '#188df0'},
                        {offset: 1, color: '#188df0'}
                    ]
                )
            },
            emphasis: {
                color: new Chart.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        {offset: 0, color: '#2378f7'},
                        {offset: 0.7, color: '#2378f7'},
                        {offset: 1, color: '#83bff6'}
                    ]
                )
            }
        }
    }]
}
// 图表 6
const SCEoption6 = {
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}月 : {c}"
    },
    legend: {
        data: [{
            name: '',
            icon: 'rect'
        }],
        top: 1,
        left: 1,
        itemGap: 10,
        itemWidth: 12,
        itemHeight: 12,
        textStyle: {
            fontSize: 12,
            color: "#323232"
        }
    },
    grid: {
        left: 50,
        right: 10,
        top: 30,
        bottom: 30,
        borderWidth: 1
    },
    xAxis: {
        type: 'category',
        data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
        axisLine: {
            lineStyle: {
                color: "#999999",
                width: 1
            }
        },
        axisLabel: {
            margin: 14,
            height: 70,
            interval: 0,
            textStyle: {
                fontSize: 10,
                color: "#999999"
            }
        }
    },
    yAxis: {
        type: 'value',
        axisLine: {
            lineStyle: {
                color: "#999999",
                width: 1
            }
        },
        axisLabel: {
            margin: 14,
            textStyle: {
                fontSize: 10,
                color: "#999999"
            }
        }
    },
    series: [{
        name: '',
        type: 'bar',
        barGap: 0,
        data: [50000, 70000, 80000, 40000, 50000, 30000, 40000, 60000, 50000, 40000, 60000, 40000],
        barWidth: 10,
        itemStyle: {
            normal: {
                color: new Chart.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        {offset: 0, color: '#83bff6'},
                        {offset: 0.5, color: '#188df0'},
                        {offset: 1, color: '#188df0'}
                    ]
                )
            },
            emphasis: {
                color: new Chart.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        {offset: 0, color: '#2378f7'},
                        {offset: 0.7, color: '#2378f7'},
                        {offset: 1, color: '#83bff6'}
                    ]
                )
            }
        }
    }]
}

export const data = {
    newClient: require("@/assets/img/newClient.png"),
    lossClient: require("@/assets/img/lossClient.png"),
    order: require("@/assets/img/order.png"),
    price: require("@/assets/img/price.png"),
    sumClient: require("@/assets/img/price.png"),
    startTime: '',
    // 总人数时间筛选
    time: [],
    // 搜索框
    queryData: {
        time: [],
        deptId: '',
    },
    // 下拉选项
    options: [],
    // 总客户数
    num1: 0,
    // 成交客户数
    num2: 0,
    // 成交订单数
    num3: 0,
    // 销售额
    num4: 0,
    // 客单价
    num5: 0,
    // 新增客户数
    num6: 0,
    // 流失客户数
    num7: 0,
    // 成交客户排行榜
    clientRank: [],
    // 成交额排行榜
    priceRank: [],
    // 排行榜显示
    rankShow: 'price',

    SCEoption1,
    SCEoption2,
    SCEoption3,
    SCEoption4,
    SCEoption5,
    SCEoption6,
}

